<template>
    <div class="register-box-title" style="height: 100px;">
        <div class="logoBig">
            <img src="~images/logo.png" style="margin-left: 0px ; height: 100px;">
        </div>
    </div>
    <div class="register-banner" >
        <div class="register-main" >
            <div class="register-banner-bg"><img src="~images/act2.png" /></div>
            <div class="register-box">
                <h3 class="title">用户注册</h3>
                <div class="login-form">
                    <el-form ref="ruleFormRef" :model="loginForm" :rules="rules">
                        <el-form-item prop="username">
                            <el-input maxlength="20" v-model="loginForm.username" placeholder="邮箱/手机/用户名" />
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input type="password" maxlength="64" v-model="loginForm.password" placeholder="请输入密码" />
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input type="password" v-model="loginForm.rePassword" placeholder="请再次输入密码" />
                        </el-form-item>
                    </el-form>
                </div>
                <div class="am-cf">
                    <el-button style="width: 100%;" type="primary" @click="registerHandler(ruleFormRef)">提交注册</el-button>
                </div>
            </div>
        </div>
    </div>
    <div class="login-links">
        <div class="am-fr">联系我们</div>
        <div class="am-fr">网站地图</div>
    </div>
</template>
<script setup lang="ts">
import { registerApi } from '@/api/user/login'
import { useRouter } from "vue-router";
import { reactive, ref } from "vue";
import { FormInstance, ElMessage } from "element-plus";

const router = useRouter()
const ruleFormRef = ref<FormInstance>()
const rules = reactive({
    username: [
        { required: true, message: '请输入邮箱/手机/用户名', trigger: 'blur' },
        { min: 4, max: 20, message: '账号长度必须为4-20位字符!', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 16, message: '密码长度必须为6-16位字符!', trigger: 'blur' }
    ],
    rePassword: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        { min: 6, max: 16, message: '密码长度必须为6-16位字符!', trigger: 'blur' }
    ]
})

const loginForm = reactive({
    username: '',
    password: '',
    rePassword: ''
})

const registerHandler = async (formEl: FormInstance | undefined) => {
    if(!formEl) return
    await formEl.validate(valid => {
        if(valid) {
            if(loginForm.password === loginForm.rePassword) {
                const obj = {
                    username: loginForm.username,
                    password: loginForm.password,
                }
                registerApi(obj).then(res => {
                    if(res.data.code === 200) {
                        ElMessage.success('用户注册成功')
                        router.push('/login.html')
                    }
                })
            } else {
                ElMessage.error('两次密码输入不一致')
            }
        }
    })
}
</script>
<style lang="scss" scoped>
.register-box-title{
  max-width: 1000px;
  margin: 0 auto;
  height: 60px;
  img{
    height:60px;
  }
}
.am-cf{
  margin: 40px 0;
  width: 100%;
    .el-button{
        height: 40px;
    }
}

.login-form{
    margin-top: 40px;
    .el-input{
        height: 40px;
    }
}


.login-links{
    margin: 20px;
    font-size:14px;
    text-align: left;
    display: flex;
    .am-fr{
        margin-left: 10px;
        cursor: pointer;
        height: 40px;
        line-height: 40px;
        color: #409eff;
        text-decoration: underline;
    }
}

@media screen and (min-width:1025px){
  .register-box{
    width: 100%;
    max-width:360px;
    height: 410px;
    position: absolute;
    margin-top:20px;
    margin-left:0;
    background:#f8f8f8;
    right:2%;
    padding:10px 20px;
  }
  .register-banner{
    width:100%;
    height:470px;
    background:rgb(142,213,21);
  }
  .register-main{
    max-width:1000px;
    height:470px;
    margin:0 auto;
    position:relative;
  }
  /*背景*/
  .register-banner-bg{
    display:block;
    float:left;
      img{
          width: 400px;
      }
  }
}
</style>